<template>
    <van-nav-bar title="人資人事" left-arrow @click-left="onClickLeft" />
    <van-search v-model="keyword" placeholder="请输入搜索关键词" />
    <van-tabs v-model:active="tabActive">
        <van-tab v-for="item in subjectList" :key="item.id" :title="item.chartName">
            <component :is="item.com"></component>
        </van-tab>
    </van-tabs>
</template>

<script setup>
import { reactive, ref, markRaw, defineAsyncComponent  } from 'vue';
import { useRoute, useRouter } from 'vue-router';

const keyword = ref('');
const route = useRoute();
const router = useRouter();
document.title = route.params.page === 'lsd01' ? '人資人事' : '其它';

const tabActive = ref(0);
const subjectList = reactive([
    {
        id: 'APP0101',
        chartName: '現況總覽',
        enabled: true,
        parentId: 'APP01'
    },
    {
        id: 'APP0102',
        chartName: '總量控制',
        enabled: true,
        parentId: 'APP01'
    }
]);
subjectList.map((item) => {
    //markRaw 組件不需要代理，節省性能
    item.com = markRaw(
        defineAsyncComponent(() =>
            import(
                `./${item.parentId.toLocaleLowerCase()}/${item.id.substring(0, 1)}${item.id
                    .substring(1)
                    .toLocaleLowerCase()}.vue`
            )
        )
    );
});

const onClickLeft = () => {
    router.go(-1);
}
</script>
